<template>
    <div style="background-color: #fff;">
        <headerCom>居民管理</headerCom>
        <section class="searchBox">
            <el-form label-position="right" :model="formLabelAlign">
                <div class="line">
                    <el-form-item label="签约状态 ">
                        <el-select class="m-2" placeholder="请选择" v-model="signStatus">
                            <el-option v-for="item in signStatusArr" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="签约机构">
                        <el-select class="m-2" placeholder="请选择" v-model="signDepartment">
                            <el-option v-for="item in signDepartmentArr" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="医生团队">
                        <el-select class="m-2" placeholder="请选择" v-model="doctorTeam">
                            <el-option v-for="item in doctorTeamOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <div class="endfix" style="width: 25%;">
                        <el-button type="primary">新增居民档案</el-button>
                        <el-button>导出</el-button>
                    </div>
                </div>
                <div class="line">
                    <el-form-item label="服务包" class="pdchang">
                        <el-select class="m-2" placeholder="请选择" v-model="doctorTeam">
                            <el-option v-for="item in doctorTeamOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="居民标签">
                        <el-select class="m-2" placeholder="请选择" v-model="doctorTeam">
                            <el-option v-for="item in doctorTeamOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item class="searchInput">
                        <el-input placeholder="Please input" class="input-with-select">

                            <template #append>
                                <el-button :icon="Search" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <div id="raidoBox" class="endfix">
                        <el-radio-group v-model="radio" size="small">
                            <el-radio :label="1">
                                <el-icon>
                                    <Menu />
                                </el-icon>
                            </el-radio>
                            <el-radio :label="2">
                                <el-icon>
                                    <Expand />
                                </el-icon>
                            </el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </el-form>
        </section>
        <section>
            <ResidentCard v-if="radio===1"></ResidentCard>
            <ResidentListComVue v-else></ResidentListComVue>
        </section>
    </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import ResidentCard from '@/components/ResidentMan/ResidentCardCom.vue'
import ResidentListComVue from '@/components/ResidentMan/ResidentListCom.vue';
import headerCom from '@/components/ResidentMan/headerCom.vue'
const radio = ref<number>(1);

interface formLabelAlignType {
    name: string;
    region: string;
    type: string;
}
const formLabelAlign = reactive<formLabelAlignType>({
    name: '',
    region: '',
    type: '',
})

type options = {
    label: string,
    value: string
}

const signStatus = ref<string>('');

const signStatusArr: options[] = [
    {
        label: '请选择',
        value: '请选择'
    },
    {
        label: '待签约',
        value: '待签约'
    },
    {
        label: '签约中',
        value: '签约中'
    },
    {
        label: '签约生效中',
        value: '签约生效中'
    },
    {
        label: '待续约',
        value: '待续约'
    },
]

const signDepartment = ref<string>('');

const signDepartmentArr: options[] = [
    {
        label: '请选择',
        value: '请选择'
    },
    {
        label: '社区中心1',
        value: '社区中心1'
    },
    {
        label: '社区中心2',
        value: '社区中心2'
    },
    {
        label: '社区中心3',
        value: '社区中心3'
    }
]

const doctorTeam = ref<string>('');

const doctorTeamOptions: options[] = [
    {
        label: '请选择',
        value: '请选择'
    },
    {
        label: '王团队',
        value: '王团队'
    },
    {
        label: '刘团队',
        value: '刘团队'
    },
    {
        label: '张团队',
        value: '张团队'
    },
]
</script>

<style scoped lang='less'>
header {
    display: flex;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    margin: 18px;
    padding: 30px;

    .colLine {
        width: 6px;
        height: 24px;
        background: inherit;
        background-color: rgba(41, 132, 248, 1);
        border: none;
        border-radius: 8px;
    }
}

/*去掉radio的小圆点*/
:deep(.el-radio__input) {
    display: none !important;
}

:deep(.el-radio__input).is-checked+.el-radio__label {
    transition: all .3s;
}

.el-radio {
    margin-right: 0;
}

.el-select {
    width: 100%;
    min-width: 100px;
}

.line {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
        width: 25%;
        min-width: 200px;
        padding-left: 50px;
        box-sizing: border-box;
    }

    .searchInput {
        width: 35%;
    }

    #raidoBox {
        width: 15%;
        min-width: 0;
    }

    .endfix {
        text-align: end;
        padding-right: 20px;
        box-sizing: border-box;
        min-width: 230px;
    }

    .pdchang {
        padding-left: 64px;
    }
}
</style>